<template>
  <div id="app">
    <transition :name="transitionName">
      <!--  v-if="isRouterAlive"  -->
      <router-view />
    </transition>
  </div>
</template>
<script>
//移动端点击事件'click'不生效，需要使用'fastclick'插件解决
import Fastclick from "fastclick";
export default {
  data() {
    return {
      transitionName: "slide-left",
      isRouterAlive: true,
    };
  },
  // provide() {
  //   return {
  //     reload: this.reload,
  //   };
  // },
  // methods: {
  //   reload() {
  //     this.isRouterAlive = false;
  //     this.$nextTick(function () {
  //       this.isRouterAlive = true;
  //     });
  //   },
  // },

  created: function () {
    //判断用户是否登录
    if (this.$store.getters.getIsLogin) {
      //已登录刷新之后获取用户信息
      this.$store.dispatch("getInfo");
      this.$store.dispatch("getCartData");
    }
  },
  //页面过渡动画
  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        //外---》内
        this.transitionName = "slide-left";
      } else if (to.meta.index < from.meta.index) {
        //内---》外
        this.transitionName = "slide-right";
      } else {
        this.transitionName = ""; //同级 无过渡效果
      }
    },
  },
  //解决移动端点击300ms延时
  mounted() {
    Fastclick.attach(document.body);
  },
};
</script>
<style lang="scss">
#app {
  width: 100%;
  // max-width: 800px;
  height: 100%;
  margin: 0 auto;
  background: #f7f7f7;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  left: 0;
  top: 0;
}
.router-view {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

/*切换动画*/
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  height: 100%;
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  backface-visibility: hidden;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
